﻿<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS下拉菜单演示</title> 
<style type="text/css"> 
.hidden
{
 position:absolute;
 display:none;
}
.block
{
  position:absolute;
  display:block;
  }
#wrap
{
  width:200px;
  
  }
  
ul{
  margin:0px;
padding:0px;
list-style:none;

}
 
</style> 
<script type=text/javascript> 
function Show()
{
  document.getElementById("test").className="block";
  
}
function Hidden()
{
   document.getElementById("test").className="hidden";
}

</head> 
<body>
<div id="wrap"  onmouseout="Hidden()"   onmouseover="Show()" > 

<div  >
<a href="#">产品系列</a>
</div>


<div id="test" class="hidden" >
<ul id="nav" > 
<li>产品一 <a href="#">产品二</a> <a href="#">产品三 </a></li> 
<li>产品一  <a href="#">产品二</a> <a href="#">产品三 </a></li> 
<li>产品一 <a href="#">产品二</a> <a href="#">产品三 </a></li> 
<li>产品一  <a href="#">产品二</a> <a href="#">产品三 </a></li> 
<li>产品一  <a href="#">产品二</a> <a href="#">产品三 </a></li> 
<li>产品一 <a href="#">产品二</a> <a href="#">产品三 </a></li> 
</ul>
</div> 

</div>
</body> 
</html>